<template>
  <div>
    <el-form
      ref="elForm"
      :model="formData"
      :rules="rules"
      size="medium"
      label-width="100px"
    >
      <el-card>
        <div slot="header" class="clearfix relative">
          <el-col :span="18">
            <span class="title-icon">参与部门配置(同一部门池互看)</span>
          </el-col>
          <el-col :span="6">
            <el-button type="primary" @click="submitForm">提交</el-button>
          </el-col>
        </div>
        <el-row>
          <el-col :span="11">
            <span>&nbsp;</span>
          </el-col>
          <el-col :span="2">
            <em
              class="el-icon-plus"
              @click="addNewDepart"
              style="color:red;font-size:20px;margin-left:50px;"
            ></em>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="11">
            <span>&nbsp;</span>
          </el-col>
        </el-row>

        <el-row v-for="(item, k) in formData.departs" :key="k">
          <el-col :span="1">
            <span>部门池{{ k + 1 }}</span>
          </el-col>
          <el-col :span="9">
            <el-form-item prop="departIds">
              <el-select
                v-model="item.departIds"
                placeholder=""
                multiple
                filterable
                clearable
                :style="{ width: '100%' }"
              >
                <el-option
                  v-for="(k, v) in nonDepartsIdOptions"
                  :key="v"
                  :label="nonDepartsIdOptions[v]"
                  :value="parseInt(v)"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="2"
            ><span style="margin-left:20px;">
              <em
                class="el-icon-minus"
                @click="removeNewDepart(k)"
                style="color:red;font-size:20px;margin-left:30px;"
              ></em></span
          ></el-col>
        </el-row>
      </el-card>
      <el-card
        ><div slot="header" class="clearfix relative">
          <span class="title-icon">不参与配置</span>
        </div>
        <el-col :span="13">
          <el-form-item label="不参与客户" prop="nonDepartsId">
            <el-select
              v-model="formData.nonDepartsId"
              v-if="showSearchCustomer"
              placeholder="请选择不参与客户"
              multiple
              filterable
              remote
              reserve-keyword
              :remote-method="getCustomerMap"
              clearable
              :style="{ width: '100%' }"
            >
              <el-option
                v-for="(k, v) in customerIdOptions"
                :key="v"
                :label="customerIdOptions[v]"
                :value="parseInt(v)"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-card>

      <el-card
        ><div slot="header" class="clearfix relative">
          <el-col :span="12">
            <span class="title-icon">活跃转休眠</span>
          </el-col>
          <el-col :span="12">
            <el-form-item label="功能已开启" prop="turnSleep" required>
              <el-switch
                v-model="formData.turnSleep"
                active-color="#6189CB"
                inactive-color="#C7C8C3"
              ></el-switch>
            </el-form-item>
          </el-col>
        </div>
        <el-row>
          <el-col :span="6">
            <span
              >每月转化日期&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;活动自动转休眠
              在每月的</span
            >
          </el-col>
          <el-col :span="4">
            <el-form-item>
              <el-input
                v-model="formData.sleepChangeMonthDay"
                placeholder="请输入每月转化日期  "
                clearable
                :style="{ width: '100%' }"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="2"><span style="margin-left:20px;"> 号</span></el-col>
        </el-row>

        <el-row>
          <el-col :span="6">
            <span
              >转化条件1&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;走过货且最近走货
              距今></span
            >
          </el-col>
          <el-col :span="4">
            <el-form-item>
              <el-input
                v-model="formData.sleepCondition1"
                placeholder="请输入转化条件1  "
                clearable
                :style="{ width: '100%' }"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="2"><span style="margin-left:20px;"> 天</span></el-col>
        </el-row>
      </el-card>

      <el-card
        ><div slot="header" class="clearfix relative">
          <el-col :span="12">
            <span class="title-icon"
              >休眠转公海(客户有未签收运单，或者欠款>0,不转公海)</span
            >
          </el-col>
          <el-col :span="12">
            <el-form-item label="功能已开启" prop="turnsActive" required>
              <el-switch
                v-model="formData.turnsActive"
                active-color="#6189CB"
                inactive-color="#C7C8C3"
              ></el-switch>
            </el-form-item>
          </el-col>
        </div>

        <el-row>
          <el-col :span="6">
            <span
              >每月转化日期&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;休眠自动转公海
              在每月</span
            >
          </el-col>
          <el-col :span="5">
            <el-form-item>
              <el-input
                v-model="formData.activeChangeMonthDay"
                placeholder="请输入每月转化日期  "
                clearable
                :style="{ width: '100%' }"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="2"><span style="margin-left:20px;"> 号</span></el-col>
        </el-row>

        <el-row>
          <el-col :span="6">
            <span
              >转化条件1&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;休眠客户-普通，走过货
              且最近走货 距今></span
            >
          </el-col>
          <el-col :span="5">
            <el-form-item>
              <el-input
                type="number"
                v-model="formData.activeCondition1"
                placeholder="休眠客户转公海，需>20天  "
                clearable
                :style="{ width: '100%' }"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="2"><span style="margin-left:20px;"> 天</span></el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <span
              >转化条件2&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;潜在客户（已审核），未走过货
              且审批潜在通过 距今></span
            >
          </el-col>
          <el-col :span="5">
            <el-form-item>
              <el-input
                type="number"
                v-model="formData.activeCondition2"
                placeholder="休眠客户转公海，需>20天  "
                clearable
                :style="{ width: '100%' }"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="2"><span style="margin-left:20px;"> 天</span></el-col>
        </el-row>

        <el-row>
          <el-col :span="6">
            <span
              >转化条件3&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;休眠客户-分配， 且分配时间
              距今></span
            >
          </el-col>
          <el-col :span="5">
            <el-form-item>
              <el-input
                type="number"
                v-model="formData.activeCondition3"
                placeholder="休眠客户转公海，需>20天  "
                clearable
                autocomplete="off"
                :style="{ width: '100%' }"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="2"><span style="margin-left:20px;"> 天</span></el-col>
        </el-row>
      </el-card>
    </el-form>
  </div>
</template>

<script>
import { ajax } from "@/store/yg/common/utils";
import axios from "axios";
import * as constant from "@/store/yg/common/constant";
import { m } from "@/store/yg/common/local";

export default {
  props: ["data"],
  data() {
    return {
      formData: {
        departs: [{ id: 1, key: 2 }]
      },
      id: "",
      row: "",
      rules: {
        // nonDepartsId: [
        //   {
        //     required: true,
        //     type: "array",
        //     message: "请至少选择一个不参与客户",
        //     trigger: "change"
        //   }
        // ]
      },
      showSearchCustomer: true,
      nonDepartsIdOptions: {},
      customerIdOptions: {}
    };
  },
  mounted() {
    this.initData();
  },
  methods: {
    //根据条件搜索客户下拉
    async getCustomerMap(query) {
      let len = query.split(" ").join("").length;
      if (query !== "" && len > 0) {
        let data = await ajax("initOptions", {
          code: query
        });
        let searchCustomerOptions = data.data;
        if (searchCustomerOptions) {
          this.showSearchCustomer = false;
          for (let itemKey in searchCustomerOptions) {
            console.log(itemKey);
            this.customerIdOptions[itemKey] = searchCustomerOptions[itemKey];
          }
          this.showSearchCustomer = true;
        }
      }
    },

    initData() {
      ajax("findRow", {}).then(
        res => {
          console.log(res);
          if (res) {
            this.formData = res.data;
            this.customerIdOptions = res.data2;
            this.nonDepartsIdOptions = res.data3;
          }
        },
        error => {
          console.log(error);
        }
      );
    },

    removeNewDepart(index) {
      if (this.formData.departs) {
        this.formData.departs.splice(index, 1);
      }
    },
    addNewDepart() {
      if (!this.formData.departs) {
        this.formData.departs = [];
      }
      this.formData.departs.push({});
      console.log(this.formData.departs);
    },
    submitForm() {
      ajax("save", this.formData).then(
        res => {
          if (res.code == 200) {
            this.$message.success("保存成功!");
          } else {
            this.$message.error(res.message);
          }
        },
        error => {
          this.$message.error("保存失败");
          console.log(error);
        }
      );
    },
    activeCondition2Input(value){
      console.log("ok")
      if(value<20){
        this.formData.activeCondition2=null;
      }
    }
  }
};
</script>
